<template>
    <transition name="slider">
        <div class="about">
            <m-header :canreturn=true :titleText="titleText"></m-header>
            <div class="infobox">
                <div class="title" v-if="$route.query.type === 1">关于积分</div>
                <div class="title" v-if="$route.query.type === 2">关于兑换</div>
                <div class="info" v-if="$route.query.type === 1" v-html="content">
                </div>
                <div class="info" v-if="$route.query.type === 2" v-html="content">
                </div>
            </div>
        </div>
    </transition>
</template>

<script type="text/ecmascript-6">
import MHeader from '@/components/m-header/m-header';
import { getCommonInfoHasData } from '@/base/api/indexpage/getindexinfo';

export default {
    data() {
        return {
            titleText: '积分获取',
            content: '',
        };
    },
    created() {
        this.titleText = this.$route.query.type === 1 ? '积分获取' : '关于兑换';
        this._getAboutInfo(this.$route.query.type);
    },
    methods: {
        _getAboutInfo(type) {
            const path = '/shop/getPage';
            getCommonInfoHasData(path, {
                type,
            }).then((res) => {
                console.log(res);
                this.content = res.content;
            });
        },
    },
    components: {
        MHeader,
    },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';
@import '~common/stylus/mixin';

slider();

.about {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    background: #ffffff;

    .infobox {
        padding: 0 15px;

        .title {
            font-size: $font-size-large;
            color: #222222;
            line-height: 50px;
            border-bottom: 1px solid #cccccc;
        }

        .info {
            font-size: $font-size-small;
            line-height: 24px;
            margin-top: 12px;
        }
    }
}
</style>

